<template>
  <!-- 评论内容 -->
  <div class="cmtBox">
    <ul>
      <li v-for="item in DadReply" :key="item.id">
        <!-- 评论用户 信息-->
        <div class="cmtUser">
          <!-- 头像 -->
          <div class="uIcon">
            <img :src="item.srt" alt="" />
          </div>
          <!-- 用户名称信息 -->
          <div class="Uinfo">
            <!-- 用户名 -->
            <span class="Uname">{{ item.name }}</span>
            <!-- 评论时间  -->

            <span class="cmtInfo">{{ item.date }}</span>
          </div>
        </div>
        <!-- 评论内容 -->
        <p>{{ item.content }}</p>
        <button class="reply" @click="gotWrite">回复</button>
        <!-- 点击回复 写评论 -->
        <div class="writBox" ref="writBox">
          <!-- 取消回复 -->
          <div class="cancelBtn">
            <button class="noReply" @click="cancelReply">取消回复</button>
          </div>

          <WriteCmt></WriteCmt>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import WriteCmt from './WriteCmt.vue';
  export default {
    name: 'ComtContent',
    components: {
      WriteCmt,
    },
    data() {
      return {
        DadReply: [
          {
            id: 1,
            name: '哈哈',
            str: '../../state/img/login01.jpg',
            date: '2022-01-01',
            content: '哒哒哒爱搭搭',
          },
          {
            id: 2,
            name: '安安',
            str: '../../state/img/login01.jpg',
            date: '2022-01-01',
            content: '啊啊哒哒哒哒哒',
          },
          {
            id: 3,
            name: '嘻嘻',
            str: '../../state/img/login01.jpg',
            date: '2022-01-01',
            content: '鹅鹅鹅鹅鹅额',
          },
          {
            id: 4,
            name: '远远',
            str: '../../state/img/login01.jpg',
            date: '2022-01-01',
            content: '摇咿摇咿摇晕晕',
          },
        ],
      };
    },
    methods: {
      // 点击回复
      gotWrite() {
        this.$refs.writBox.style = ' display: block;';
      },
      // 点击取消回复
      cancelReply() {
        this.$refs.writBox.style = ' display: none;';
      },
    },
  };
</script>

<style lang="less" scoped>
  // 评论内容
  .cmtBox {
    width: 100%;
    margin-top: 15px;
    ul {
      li {
        position: relative;
        margin-bottom: 15px;
        border: 1px solid #657786;
        //  用户信息
        .cmtUser {
          display: flex;
          align-items: center;
          height: 50px;
          // 头像
          .uIcon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            overflow: hidden;
            img {
              height: 100%;
            }
          }
          //  用户名等信息
          .Uinfo {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 6px;
            .Uname {
              font-size: 14px;
              font-weight: 600;
              color: #fb6c28;
              cursor: pointer;
            }
            // 评论时间 回复按钮

            // 评论时间
            .cmtInfo {
              font-size: 12px;
              color: #657786;
            }
          }
        }
        p {
          margin-left: 50px;
          padding: 10px;
          font-size: 14px;
          color: #63686d;
          background-color: #f5f5f5;
          border-radius: 8px;
        }
        .reply {
          position: absolute;
          display: none;
          top: 20px;
          right: 15px;
          width: 36px;
          height: 20px;
          color: #fff;
          background-color: #fb6c28;
          border-radius: 6px;
        }
        //  鼠标悬浮在 li 上出现 回复按钮
        &:hover {
          .reply {
            display: block;
          }
        }
        // 点击回复 出现文本框盒子
        .writBox {
          display: none;
          margin-top: 15px;
          // 取消回复按钮
          .cancelBtn {
            position: relative;
            height: 40px;
            .noReply {
              position: absolute;
              right: 15px;
              // width: 36px;
              margin: 10px;
              // margin-right: 15px;
              padding: 0 3px;
              height: 20px;
              color: #fff;
              line-height: 20px;
              border-radius: 6px;
              background-color: #657786;
            }
          }
        }
      }
    }
  }
</style>
